const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/built.js',
    path: path.resolve(__dirname, 'dist'),
    // 打包前，将path清空再打包
    clean: true,
  },
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader
      {
        // 匹配css文件
        test: /\.css$/,
        // 使用哪些loader文件进行处理
        use: [
          // use数组中loader执行顺序：从后往前
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        //匹配less文件
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载less-loader 和 less
          'less-loader',
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 10kb
          }
        },
        generator: {
          // [hash:10 只计算前十个数字，减小打包体积
         filename: 'static/images/[hash:10][ext][query]'
       }
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          // [hash:10 只计算前十个数字，减小打包体积
         filename: 'static/fonts/[hash:10][ext][query]'
       }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          // options: {
          //   presets: ['@babel/preset-env']
          // }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'zsx',
      template: './src/index.html'
    }),
    new ESLintPlugin({
      context: path.resolve(__dirname, "src")
    })
  ],
  mode: 'development'
};